<!DOCTYPE html>
<html lang="zh-CN" ng-app="share">

	<head>
		<meta charset='utf-8' />
		<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

		<!--<script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>-->
		<script src="http://cdn.bootcss.com/vue/1.0.24/vue.js"></script>

	<script type="text/javascript">
		function clear_sel() {
			if (window.getSelection) {
			  if (window.getSelection().empty) {  // Chrome
			    window.getSelection().empty();
			  } else if (window.getSelection().removeAllRanges) {  // Firefox
			    window.getSelection().removeAllRanges();
			  }
			} else if (document.selection) {  // IE?
			  document.selection.empty();
			}
		}
		function array_remove(array,item) {
			if(array ){
				var idx = array.indexOf(item)
				if(idx!=-1){
					array.splice(idx,1)
				}
			}
		}
		function array_insert(array,idx,item) {
			if(array){
				array.splice(idx,0,item)
			}
		}
		function array_move(array,item,to_idx) {
			var old_idx=array.indexOf(item)
			if(old_idx!=-1){
				if(old_idx<to_idx){
					to_idx+=1
					array.splice(to_idx,0,item)
					array.splice(old_idx,1)
				}else{
					array.splice(old_idx,1)
					array.splice(to_idx,0,item)
				}
			} else{
				array.splice(to_idx,0,item)
			}
		}
		function array_replace(array,src,dst) {
			var idx = array.indexOf(src)
			if(idx!=-1){
				array.splice(idx,1)
				array.splice(idx,0,dst)
			}
		}
		//@mouseup='onmouseup($event)'
		
		drag_mix={
			compiled:function () {
						//$('#tail').hide()
					var self =this
					$(document).bind('mousemove', function(e){
						self.x=e.clientX //pageX
						self.y=e.clientY //pageY
						self.drag_engin(e.pageX, e.pageY)
						if(self.is_drag){
							e.preventDefault()
						}
					}).bind('mouseup',function (e) {
						self.is_down=false
						if(self.is_drag){
							self._drag_end()
							e.preventDefault()
						}
					})
					$(window).scroll(function (e) {
						self.drag_engin(self.x+$(document).scrollLeft(),self.y+$(document).scrollTop())
					})
			},
			data:{
				moveing_block:{},
			},
			methods:{
				drag_engin:function (x,y) {
					if(!this.is_drag &&this.is_down ){
						var del_x = x-this.last_start_x
						var del_y = y-this.last_start_y
						if(Math.sqrt(del_x*del_x+del_y*del_y) > 10){
							this._drag_start()
						}
					}
					if(this.is_drag){
						this.drag(x,y)
					}
				},
				_drag_start:function () {
					this.is_drag=true
					this.face.show()
					$('body').css('cursor','move')
					this.drag_start()
				},
				drag:function (x,y) {	
						clear_sel()		
						this.face.css({
						       left:  x -this.det_x,
						       top:   y -this.det_y,
						    });
					},
				_drag_end:function () {
						this.drag_end()
						this.is_drag=false;
						this.face.hide()
						this.moveing_block={}
						$('body').css('cursor','auto')
					},
				onmousedown:function (ev){
						this.is_down=true
						//this.face=face
						this.last_start_x= ev.pageX
						this.last_start_y= ev.pageY
						var div_x = $(ev.target).offset().left
						var div_y= $(ev.target).offset().top
						this.det_x = ev.pageX - div_x
						this.det_y = ev.pageY - div_y
						//this.catch_block= block
					},
				//onmouseup:function (ev) {
				//		this.is_down=false
				//	},
			}
		}
		
		$(function () {
			//det_x = 0
			//det_y = 0
			
			vm =new Vue({
				el:'#content',
				data:{
					hello:'hello world',
					//is_drag:false,
					blocks:[{label:'aaaaaa',color:'white'},
							{label:'bbbbbb',color:'white'},
							{label:'cccccc',color:'white'},
							{label:'dddddd',color:'white'},
							{label:'eeeeee',color:'white'},
							{label:'fffff',color:'white'},
							{label:'gggggg',color:'white'},
							{label:'hhhhh',color:'white'},
							{label:'iiiiiii',color:'white'},
							],
					view_style:{
						marginLeft:'20px',
						float:'left',
						minHeight:'500px',
						backgroundColor:'pink'
					},
					li_style:{
						width:'400px',
						margin:'10px'
					},
					
					virtual:{label:'',color:'yellow'},
					
				},
				mixins:[drag_mix],
				methods:{
					onmouseenter:function (idx,ev){
						if(this.is_drag){
							array_move(this.blocks,this.virtual,idx)
							ev.preventDefault();
						}
					},
					ulleave:function () {
						array_remove(this.blocks,this.virtual)
					},
					onmousedown:function (ev,block) {
						drag_mix.methods.onmousedown.call(this,ev)
						this.moveing_block = block
						this.face = $('#tail')
						this.drag_start=function () {
							array_replace(this.blocks,this.moveing_block,this.virtual)
						}
						this.drag_end=function () {
							console.log('jjj yyyy')
							array_replace(this.blocks,this.virtual,this.moveing_block)
						}
					},
					divmousedown:function (ev,block) {
						drag_mix.methods.onmousedown.call(this,ev)
						this.moveing_block=block
						this.face=$('#yy')
						this.drag_start=function () {
							$('#hyy').hide()
							//this.moveing_block=block
							//array_replace(this.blocks,this.moveing_block,this.virtual)
						}
						this.drag_end=function () {
							array_replace(this.blocks,this.virtual,{label:'fffff',color:'red'})
							$('#hyy').show()
							//array_remove(this.blocks,this.virtual)
							//array_replace(this.blocks,this.virtual,this.moveing_block)
						}
					}
				}
			})
	})

</script>
<style type="text/css" media="screen" id="test">
	#tail,#yy{
	    position: absolute;
	    float: left;
	    pointer-events:none;
	    transform:rotate(1deg);
	    display: none;
	}
	#yy{
		background-color: red;
	}
</style>
</head>
	<body>
		<!--<div id="tail">mouse tail</div>-->
		<div id='content'>
			<div id='view'  :style='view_style'>
				<ul id='dog' @mouseleave='ulleave()'>

					<li v-for='block in blocks' track-by="$index"
						@mouseenter="onmouseenter($index,$event)" 
						@mousedown="onmousedown($event,block)"
						:style='li_style'>
						<div :style='{height:"100px",backgroundColor:block.color}'>
							<span v-text='block.label'></span>
							<a href="www.qq.com" >ss</a>
						</div>
					</li>
					<li id='tail' :style='li_style' >
						<div :style='[{height:"100px",backgroundColor:moveing_block.color},{border: "1px solid #999"}]'>
							<span v-text='moveing_block.label'></span>
						</div>
					</li>

				</ul>
			</div>

			<div id='control'>
				<input type="text" name="test"  v-model='li_style.width'/>
				<ul style='float:left;' id='hyy'>
					<li @mousedown='divmousedown($event,hello)'
						 v-text='hello'>
					</li>
				</ul>
				<span id='yy' v-text='moveing_block' >
				</span>
			</div>
		</div>
		
		
	</body>
	
</html>